<template>
	<div>
		<!-- 设置规则    没有设置圆，设置边框圆角 -->
		<button :class="[color,size,{circle,round: !circle&&round}]" :disabled="disabled" @click="click">

			<i :class="['zh-iconfont',`zh-icon-${icon}`]" v-if="icon&&loading<1"></i>

			<loading style="margin-right: 5px; font-size: 10px;" :type="loading" v-if="loading>0" color></loading>

			<span v-if="$slots.default">
				<slot></slot>
			</span>
		</button>
	</div>
</template>

<script>
	// 颜色
	const colors = ['white','red','green','primary','black','yellow','orange'];
	// 大小
	const sizes = ['large', 'medium', 'small', 'mini'];
	// 支持的图标
	const icons = ['search', 'iconset0125', 'delete', 'search1', 'search2', 'search3', 'edit','Settingscontroloptions','location'];
	import loading from '../loading/loading.vue'; //防止未注册
	export default {
		// 组件名称
		name: 'zh-button',
		// 组件参数 接收来自父组件的数据
		props: {
			// 是否可用
			disabled: Boolean,
			// 按钮颜色
			color: {
				// 类型
				type: String,
				// 默认值
				default: 'blue',
				validator(value) {
					return colors.includes(value);
				}
			},
			// 是否圆形按钮
			circle: Boolean,
			// 是否圆角
			round: Boolean,
			// 大小
			size: {
				type: String,
				default: "medium",
				validator(value) {
					return sizes.includes(value);
				}
			},
			// 图标
			icon: {
				type: String,
				default: null,
				validator(value) {
					return icons.includes(value);
				}
			},
			// loading加载
			loading: {
				type: Number,
				default: 0,
			}
		},
		// 局部注册的组件
		components: {
			loading
		},
		// 组件方法
		methods: {
			// 点击事件
			click(e){
				this.$emit('click',e)
			}
		},
	}
</script>

<style lang="scss" scoped>
	@import '../variable';

	.circle {
		border-radius: 50%;
		padding: 12px !important;
	}

	.round {
		border-radius: 20px;
	}

	.large {
		font-size: $large;
		padding: 12px 20px;
	}

	.medium {
		font-size: $medium;
		padding: 10px 20px;
	}

	.small {
		font-size: $small;
		padding: 9px 15px;
	}

	.mini {
		font-size: $mini;
		padding: 7px 15px;
	}

	button {
		display: flex;
		align-items: center;
		margin-left: 10px;
		outline: none;
		border: none;
		padding: 12px 20px;
		border-radius: 4px;
		text-align: center;
		line-height: 1;
		font-weight: 500;
		cursor: pointer;
	}

	// 属性选择器
	button [class*=zh-icon-]+span {
		margin-left: 5px;
	}

	@mixin background($color) {
		background: $color;
		color: $white;

		&:hover {
			background-color: rgba($color: $color, $alpha: 0.7);
		}

		&:active {
			background-color: mix($color, rgb(130, 130, 130));
		}

		&[disabled] {
			cursor: not-allowed;
			background-color: rgba($color: $color, $alpha: 0.5);
		}
	}

	.white {
		@include background ($white);
	}

	.green {
		@include background ($green);
	}

	.red {
		@include background ($red);
	}

	.primary {
		@include background ($blue);
	}

	.yellow {
		@include background ($yellow);
	}

	.black {
		@include background ($black);
	}

	.orange {
		@include background ($orange);
	}

	.gray {
		@include background ($gray);
	}
</style>
